
// 1. 第一种直接返回一个渲染函数
// export default function() {
//   return (<div>孙小双</div>)
// }

// 2. 第二种optionsAPI
// import { defineComponent } from "vue"
// export default defineComponent({
//   data() {
//     return {
//       age: 18
//     }
//   },
//   render() {
//     return (<div>孙小双：{this.age}岁</div>)
//   }
// })

// 3. 第三种方式，setup函数模式
import { defineComponent, ref } from "vue"
interface Props {
  name?: string
}
const J = (_: any, { slots }: any) => (<>
  <div>{slots.default ? slots.default() : '默认值'}</div>
</>)
export default defineComponent({
  props: {
    name: String
  },
  emit: ['on-click'],
  setup(props: Props, { emit }) {
    const code = 'sunxiaoshuang'
    const flag = ref(true)
    const data = ref([
      '华天晓', '谭华晓', '尹晓畅'
    ])
    const vIf = ref(true)
    return () => (
      <>
        <div>孙小双, 编号: {code}</div>
        <hr />
        <div>
          <button onClick={() => flag.value = !flag.value}>隐藏与显示</button>
          <span v-show={flag.value}>我是v-show</span>
        </div>
        <hr />
        <div>我是属性props: {props.name}</div>
        <hr />
        <div>循环: </div>
        {data.value.map((item, index) => (
          <div>{index + 1}. {item}</div>
        ))}
        <hr />
        <span>实现v-if</span><button onClick={() => vIf.value = !vIf.value}>切换</button>
        {vIf.value ? <span>显示</span> : <span>隐藏</span>}
        <hr />
        <button onClick={() => emit('on-click', Math.random())}>触发父组件方法</button>
        <hr />
        <J />
        <hr />
        <J>
          呵呵呵呵
        </J>
      </>
    )
  }
})

